<template>
	<view>
		<view class="brand">
			<uni-forms ref="form" :modelValue="formData" :rules="bandRules" :label-width="90">
				<uni-forms-item label="品牌照片" required>
					<uni-file-picker v-model="formData.thum" fileMediatype="image" mode="grid" :limit="1" />
				</uni-forms-item>
				<uni-forms-item name="name" label="商家名称" required>
					<uni-easyinput v-model="formData.name" placeholder="请输入品牌名称"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="phone" label="商家电话" required>
					<uni-easyinput v-model="formData.phone" placeholder="请输入商家电话"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="所在城市" prop="address" ref="address">
					<!-- <u-input v-model="userInfo.address"></u-input> -->
					<uni-data-picker
						placeholder="请选择地址"
						popup-title="请选择城市"
						collection="opendb-city-china"
						field="code as value, name as text"
						orderby="value asc"
						:step-searh="true"
						self-field="code"
						parent-field="parent_code"
						@change="onchange"
						v-model="formData.areaCode"
					></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item name="addressMsg" label="商家地址">
					<uni-easyinput v-model="formData.addressMsg" placeholder="请输入商家详细地址"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="dsc" label="商家介绍">
					<uni-easyinput v-model="formData.dsc" placeholder="请输入商家介绍" type="textarea"></uni-easyinput>
				</uni-forms-item>
				<u-button type="primary" text="提交" @click="submit"></u-button>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { brandStore } from '../../stores/shop/brands.js';

const brandObj = uniCloud.importObject('mall-brand');
let formData = ref({
	name: '',
	phone: '',
	address: '',
	dsc: '',
	thum: []
});

const onchange = (e) => {
	formData.value.address = e.detail.value.map((i) => i.text).join('');
};

const bandRules = {
	name: {
		rules: [
			{
				required: true,
				errorMessage: '请填写品牌名称'
			},
			{
				minLength: 2,
				maxLength: 10,
				errorMessage: '名字长度在 {minLength} 到 {maxLength} 个字符'
			}
		]
	},
	phone: {
		rules: [
			{
				required: true,
				errorMessage: '请填写手机号码'
			},
			{
				validateFunction: function (rule, value, data, callback) {
					// let res = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value);
					let res = true;
					if (!res) {
						callback('手机号码不正确');
					}
					return;
				}
			}
		]
	}
};
const form = ref();
const submit = (e) => {
	form.value.validate().then((res) => {
		let arr = formData.value.thum.map(({ extname, name, size, url, fileID, path }) => {
			return {
				extname,
				name,
				size,
				url,
				fileID,
				path
			};
		});
		formData.thum = arr;
		addUpdate();
	});
};
//获取数据
const getData = async () => {
	try {
		let res = await brandObj.get();
		if (!res.data[0]) throw '未获取！';
		formData.value = res.data[0];
	} catch (e) {
		console.log(e);
	}
};
//修改或新增
const addUpdate = () => {
	if (formData.value._id) {
		brandObj.update(formData.value).then((res) => {
			if (res.updated == 1) {
				uni.showToast({
					title: '修改成功!',
					mask: true
				});
			}
		});
	} else {
		brandObj.add(formData.value).then((res) => {
			if (res.id) {
				uni.showToast({
					title: '新增成功!',
					mask: true
				});
			}
		});
	}
	const bandStore = brandStore();
	bandStore.brandList = formData.value;

	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
};
onMounted(() => {
	getData();
});
</script>

<style scoped lang="scss">
page {
	background-color: #fff;
}

.brand {
	padding: 20rpx;
}
</style>
